<template>
	<div class="uploadBtn" :style="{width,height}">
		{{text}}
		<input type="file" accept="image/*" @change='changeFn($event)' :disabled='disabled'/>
	</div>
</template>

<script>
	import { reactive,toRefs } from 'vue'
	import {useStore} from 'vuex'
	import { toast } from '@/utils/common'
	export default {
		props:{
			value:'',
			text:String,
			width:String,
	 		height:String,
			disabled:{
				type: Boolean,
				default(){
				    return false  // 默认
				}
			},
			isUploadServer:{// 是否立即上传服务器
				type:Boolean,
				default(){
				    return false  // 默认
				}
			}  
		},
		setup(props,context){
			const store = useStore()
			const state = reactive({
				imageUrl:'',
				fileObject:'',
			})

			const changeFn = e=>{
				let file = e.target.files[0];
				state.fileObject = e.target.files[0]
				if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
					toast('只能上传图片')
					return false
				}
				if(file.size>3*1024*1000){
					toast('图片大小不能超过3M')
					return false
				}
				if(props.isUploadServer){
					return uploadFile(file)
				}
				let reader = new FileReader()
				reader.onload = (e) => {
					state.imageUrl = e.target.result  // 得到base64编码
					//console.log(state.imageUrl)
				}
				reader.readAsDataURL(file)
			}

			const uploadFile = file =>{
				if(!file && !state.fileObject){
					return
				}
				!file && (file = state.fileObject)
				return new Promise((resolve, reject) =>{
					let fromData = new FormData()
					fromData.append('file', file)
					store.dispatch('arApi/upload_file',fromData)
					.then(res =>{
						if(res.success){
							state.imageUrl = res.url
							context.emit('input',res.url)   // 通过 input 事件带出数值 
							context.emit('success',res)  // 触发上传成功事情
						}else{
							return toast('上传失败，请重试!')
						}
						resolve(res)
					})
					.catch(err => {
						console.log(err)
						resolve(false)
					})
				})	
			}
		
			return {
				...toRefs(state),
				changeFn
			}
		}
	}
	// import Request from '@/utils/request'
	// export default {
	// 	props: {
	// 		text:String,
	// 		disabled:{
	// 			type: Boolean,
	// 			default(){
	// 			    return false  // 默认
	// 			}
	// 		},
	// 		width:String,
	// 		height:String
	// 	},
	// 	data() {
	// 		return {
	// 			imageUrl:'',
	// 			fileObject:''
	// 		};
	// 	},
	// 	watch:{
	// 		// 监听父组件v-model值动态改变时，同步更新
	// 		value(newValue, oldValue){
	// 		    this.imageUrl = newValue
	// 		},
	// 	},
	// 	created() {
	// 		this.imageUrl = this.value
	// 		console.log(this.value)
	// 	},
	// 	methods: {
	// 		changeFn(e) {
	// 			var file = e.target.files[0];
	// 			this.fileObject = e.target.files[0]
	// 			if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
	// 				this.$message.error('只能上传图片')
	// 				return false
	// 			}
	// 			if(file.size>3*1024*1000){
	// 				this.$message.error('图片大小不能超过3M')
	// 				return false
	// 			}
	// 			var reader = new FileReader()
	// 			reader.onload = (e) => {
	// 				this.imageUrl = e.target.result
	// 			}
	// 			reader.readAsDataURL(file)
	// 			// if(file.type != 'image/png' && file.type != 'image/jpeg' && file.type != 'image/gif' && file.type != 'image/webp'){
	// 			// 	this.$message.error('只能上传图片')
	// 			// 	return 
	// 			// }else{
	// 			// 	this.uploadFile(file)
	// 			// }
	// 		},
	// 		uploadFile(file){
	// 			if(!file && !this.fileObject){
	// 				this.$emit('input','')
	// 				return
	// 			}
	// 			!file && (file = this.fileObject)
	// 			return new Promise((resolve, reject) =>{
	// 				let fromData = new FormData()
	// 				fromData.append('file', file)
	// 				let config = {
	// 					headers: {
	// 						'Content-Type': 'multipart/form-data'
	// 					}
	// 				}
	// 				let upUrl = '/admin/noIpfs/file/upload'
	// 				Request.post(upUrl,fromData,config)
	// 				.then(res =>{
	// 					this.imageUrl = res.data.url
	// 					this.$emit('input',res.data.url)   // 通过 input 事件带出数值 
	// 					resolve(res.data.url)
	// 				})
	// 				.catch(err => {
	// 					console.log(err)
	// 					resolve(false)
	// 				})
	// 			})	
	// 		}
	// 	}
	// }
</script>

<style lang="scss" scoped>
	.uploadBtn {
		display: inline-block;
		height: 56px;
		line-height: 56px;
		border: 0;
		position: relative;
		z-index: 10;
		overflow: hidden;
		text-align: center;
		background: #0E6161;
		border-radius: 26px;
		font-size: 26px;
		padding: 0 30px;
		input{
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: 15;
			left: 0;
			top: 0;
			opacity: 0;
			cursor: pointer;
			&:disabled{
				cursor: not-allowed;
			}
		}
		&.textBtn{
			background: none;
			font-size: 28px;
			font-weight: 400;
			padding:0;
			line-height: normal;
			height: 100%;
			width: 100%;
			border-radius:0
		}
	}
</style>
